<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:fragment="head-fragment(title)">
    <meta charset="utf-8">
    <title th:text="${title}">首页</title>
    <link rel="shortcut icon" th:href="@{/images/my-bbs-icon.png}">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="My-BBS,bbs,论坛,SpringBoot论坛,论坛系统,Java论坛,SpringBoot,spring-boot,java">
    <meta name="description" content="My BBS 是由 SpringBoot + Mybatis + Thymeleaf 等技术实现的 Java BBS论坛系统">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/global.css}">

    <!-- <script src="\js\layui@2.9.14.js"></script> -->
    <!-- <link rel="stylesheet" href="\css\layui@2.9.14.css"> -->
</head>

<head th:replace="header::head-fragment('首页')">
</head>

<body>
    <!-- <div id="header-container"></div> -->
    <div th:replace="header::header-fragment"></div>


    <div class="fly-panel fly-column">
        <div class="layui-container">
            <!-- 1.渲染页面顶部的帖子分类信息 -->
            <a id="homeList" href="/">首页</a>
            <div style="display: inline-block;">
                <!-- <button id="toggleList">话题列表 <i class="layui-icon layui-icon-down layui-font-12"></i> </button>
                <ul id="listContainer" class="layui-menu layui-dropdown-menu">

                    <th:block th:unless="${null == bbsPostCategories}">
                        <th:block th:each="c : ${bbsPostCategories}">
                            <li
                                th:class="${null !=categoryId and categoryId==c.categoryId} ?'layui-hide-xs layui-this':''">
                                <a th:href="@{${'/index?categoryId='+c.categoryId}}" th:text="${c.categoryName}">分享</a>
                            </li>
                        </th:block>
                    </th:block>
                </ul> -->

                <button class="layui-btn layui-btn-primary demo-dropdown-base">
                    <span>话题列表</span>
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                </button>
            </div>
            <style>
                #homeList,
                #toggleList {
                    display: inline-block;
                    vertical-align: middle;
                    height: 38px;
                    line-height: 38px;
                    border: 1px solid transparent;
                    padding: 0 18px;
                    background-color: #16baaa;
                    color: #fff;
                    white-space: nowrap;
                    text-align: center;
                    font-size: 14px;
                    border-radius: 2px;
                    margin-right: 10px;
                }

                #toggleList {
                    /* margin-left: 10px; */
                    border-color: #d2d2d2 !important;
                    background: #fff !important;
                    color: #333;
                }

                #listContainer {
                    max-height: 400px;
                    /* 设置最大高度，超出此高度将显示滚动条 */
                    overflow-y: auto;
                    /* 当内容超出指定高度时，垂直方向显示滚动条 */
                    position: absolute;
                    z-index: 1;
                    display: none;
                    /* 默认隐藏列表 */
                    /* 其他样式 */
                    border-width: 1px;
                    border-style: solid;
                    border-color: #eee;
                    background-color: #fff;

                }

                #listContainer li {
                    display: block;
                    height: 36px;
                    line-height: 36px;
                }

                /* #listContainer a {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    line-height: 26px;
                } */

                #listContainer.show {
                    display: block;
                    /* 显示列表 */
                }

                /* 滚动条美化样式 */
                ::-webkit-scrollbar {
                    width: 8px;
                    /* 设置滚动条的宽度 */
                }

                ::-webkit-scrollbar-track {
                    background: #f1f1f1;
                    /* 设置滚动条轨道的背景颜色 */
                }

                ::-webkit-scrollbar-thumb {
                    background: #888;
                    /* 设置滚动条滑块的背景颜色 */
                }

                ::-webkit-scrollbar-thumb:hover {
                    background: #555;
                    /* 当鼠标悬停在滚动条滑块上时的背景颜色 */
                }

                .layui-dropdown-menu {
                    height: 400px;
                    /* 设置一个足够大的高度，以便内容可以滚动 */
                    overflow-y: auto;
                    /* 允许垂直滚动 */
                }
            </style>

            <!-- <ul class="layui-clear">
                <li th:class="${null ==categoryId} ?'layui-hide-xs layui-this':''"><a href="/">首页</a></li>
                <th:block th:unless="${null == bbsPostCategories}">
                    <th:block th:each="c : ${bbsPostCategories}">
                        <li th:class="${null !=categoryId and categoryId==c.categoryId} ?'layui-hide-xs layui-this':''">
                            <a th:href="@{${'/index?categoryId='+c.categoryId}}" th:text="${c.categoryName}">分享</a>
                        </li>
                    </th:block>
                </th:block>
                <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>
            </ul> -->

            <div class="fly-column-right layui-hide-xs">
                <span class="fly-search"><i class="layui-icon"></i></span>
                <a th:href="@{/addPostPage}" class="layui-btn">发布新帖</a>
            </div>
        </div>
    </div>

    <div class="layui-container" style="min-height: 530px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="fly-panel" style="margin-bottom: 0;">
                    <div class="fly-panel-title fly-filter">
                        <a th:href="@{/index(keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                            th:class="${period == null ? 'layui-this':''}">默认</a>
                        <span style="display: none" class="fly-mid"></span>
                        <a style="display: none" th:class="${period == 'hot7' ? 'layui-this':''}"
                            th:href="@{/index(period='hot7',keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}">周榜</a>
                        <span style="display: none" class="fly-mid"></span>
                        <a style="display: none" th:class="${period == 'hot30' ? 'layui-this':''}"
                            th:href="@{/index(period='hot30',keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}">月榜</a>
                        <span style="display: none" class="fly-mid"></span>
                        <span class="fly-filter-right layui-hide-xs">
                            <a th:href="@{/index(orderBy='new',period=${period},keyword=${keyword},categoryId=${categoryId})}"
                                th:class="${orderBy == 'new' ? 'layui-this':''}">按最新</a>
                            <span class="fly-mid"></span>
                            <a th:href="@{/index(orderBy='comment',period=${period},keyword=${keyword},categoryId=${categoryId})}"
                                th:class="${orderBy == 'comment' ? 'layui-this':''}">按热议</a>
                        </span>
                    </div>
                    <!-- 2.渲染帖子分页列表数据 -->
                    <th:block th:if="${#lists.isEmpty(pageResult.list)}">
                        <!-- 无数据时 -->
                        <div class="fly-none">没有相关数据</div>
                    </th:block>
                    <th:block th:unless="${#lists.isEmpty(pageResult.list)}">
                        <ul class="fly-list">
                            <th:block th:each="bbsPostListEntity : ${pageResult.list}">
                                <li>
                                    <a th:href="@{${'/userCenter/'+bbsPostListEntity.publishUserId}}"
                                        class="fly-avatar">
                                        <img th:src="@{${bbsPostListEntity.headImgUrl}}"
                                            th:alt="${bbsPostListEntity.nickName}">
                                    </a>
                                    <h2>
                                        <a href="##" class="layui-badge"
                                            th:text="${bbsPostListEntity.postCategoryName}">分享</a>
                                        <a th:href="@{${'/detail/'+bbsPostListEntity.postId}}"
                                            th:text="${bbsPostListEntity.postTitle}">帖子标题</a>
                                    </h2>
                                    <div class="fly-list-info">
                                        <a th:href="@{${'/userCenter/'+bbsPostListEntity.publishUserId}}" link>
                                            <cite th:text="${bbsPostListEntity.nickName}">用户名</cite>
                                        </a>
                                        <span
                                            th:text="${#dates.format(bbsPostListEntity.createTime, 'yyyy-MM-dd HH:mm:ss')}">刚刚</span>
                                        <span class="fly-list-kiss layui-hide-xs" title="赞"><i
                                                class="iconfont icon-zan"></i>
                                            <th:block th:text="${bbsPostListEntity.postCollects}"></th:block>
                                        </span>
                                        <span class="fly-list-nums"><i class="iconfont icon-pinglun1" title="评论"></i>
                                            <th:block th:text="${bbsPostListEntity.postComments}"></th:block>
                                        </span>
                                    </div>
                                    <div class="fly-list-badge">
                                    </div>
                                </li>
                            </th:block>
                        </ul>
                        <!-- 3.生成分页按钮 -->
                        <div style="text-align: center">
                            <div class="laypage-main">
                                <th:block th:if="${pageResult.currPage>1}">
                                    <a class="laypage-prev"
                                        th:href="@{/index(period=${keyword},page=${pageResult.currPage-1},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}">
                                        &lt;&lt;</a>
                                </th:block>
                                <th:block th:if="${pageResult.currPage==1}">
                                    <a class="laypage-prev" href="##">
                                        &lt;&lt;</a>
                                </th:block>
                                <th:block th:if="${pageResult.currPage-2 >=1}">
                                    <a class="laypage-prev"
                                        th:href="@{/index(period=${period},page=${pageResult.currPage-2},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                                        th:text="${pageResult.currPage - 2}">1</a>
                                </th:block>
                                <th:block th:if="${pageResult.currPage-1 >=1}">
                                    <a class="laypage-prev"
                                        th:href="@{/index(period=${period},page=${pageResult.currPage-1},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                                        th:text="${pageResult.currPage - 1}">1</a>
                                </th:block>
                                <a href="##" class="laypage-curr" th:text="${pageResult.currPage}">1</a>
                                <th:block th:if="${pageResult.currPage+1<=pageResult.totalPage}">
                                    <a class="laypage-next"
                                        th:href="@{/index(period=${period},page=${pageResult.currPage+1},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                                        th:text="${pageResult.currPage + 1}">1</a>
                                </th:block>
                                <th:block th:if="${pageResult.currPage+2<=pageResult.totalPage}">
                                    <a class="laypage-next"
                                        th:href="@{/index(period=${period},page=${pageResult.currPage+2},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}"
                                        th:text="${pageResult.currPage + 2}">1</a>
                                </th:block>
                                <th:block th:if="${pageResult.currPage<pageResult.totalPage}">
                                    <a class="laypage-next"
                                        th:href="@{/index(period=${period},page=${pageResult.currPage+1},keyword=${keyword},categoryId=${categoryId},orderBy=${orderBy})}">
                                        &gt;&gt;</a>
                                </th:block>
                                <th:block th:if="${pageResult.currPage==pageResult.totalPage}">
                                    <a class="laypage-next" href="##">
                                        &gt;&gt;</a>
                                </th:block>
                            </div>
                        </div>
                    </th:block>
                </div>
            </div>
            <div class="layui-col-md4">

                <div class="fly-panel">
                    <div class="fly-panel-title">
                        系统公告
                    </div>
                    <div class="fly-panel-main">
                        <p>“吐个槽”升级啦！</p>
                        <p>可以跟帖讨论了。你的建言，我来采用；你的妙计我来实施，让我们建言献策，共同建设清爽丝滑办公系统。</p>
                        <p>欢迎来“吐个槽”专区发表您的见解。</p>
                        <p>您还可以在企业微信工作台找到它。</p>
                    </div>
                </div>

                <div class="fly-panel">
                    <h3 class="fly-panel-title">温馨通道</h3>
                    <ul class="fly-panel-main fly-list-static">
                        <li>
                            <a href="http://www.sdgt.com" target="_blank">山钢门户</a>
                        </li>
                        <li>
                            <a href="http://mail.shansteelgroup.com/" target="_blank">企业邮局</a>
                        </li>

                        <li>
                            <a href="http://oa.sdgt.com/" target="_blank">办公OA</a>
                        </li>
                        <li>
                            <a href="http://10.18.11.11" target="_blank">
                                山信软件
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 4.渲染本周热议列表 -->
                <dl style="display: none;" class="fly-panel fly-list-one">
                    <dt class="fly-panel-title">本周热议</dt>
                    <th:block th:if="${#lists.isEmpty(hotTopicBBSPostList)}">
                        <!-- 无数据时 -->
                        <div class="fly-none">没有相关数据</div>
                    </th:block>
                    <th:block th:unless="${#lists.isEmpty(hotTopicBBSPostList)}">
                        <th:block th:each="bbsEntity : ${hotTopicBBSPostList}">
                            <dd>
                                <a th:href="@{'/detail/'+${bbsEntity.postId}}"
                                    th:text="${bbsEntity.postTitle}">My-BBS开源啦</a>
                                <span><i class="iconfont icon-pinglun1"></i>
                                    <th:block th:text="${bbsEntity.postComments}"></th:block>
                                </span>
                            </dd>
                        </th:block>
                    </th:block>
                </dl>

                <div class="fly-panel">
                    <div class="fly-panel-title">
                        我的公众号
                    </div>
                    <div class="fly-panel-main">
                        <a href="http://www.sdgt.com" target="_blank">
                            <img style="max-width: 60%;" th:src="@{/images/my-gzh-qrcode.jpg}">
                        </a>
                    </div>
                </div>

                <div class="fly-panel fly-link" style="display: none">
                    <h3 class="fly-panel-title">友情链接</h3>
                    <dl class="fly-panel-main">
                        <dd><a href="http://www.layui.com/" target="">layui</a>
                        <dd>
                        <dd><a href="https://www.lanqiao.cn/users/358858" target="">蓝桥</a>
                        <dd>
                        <dd><a href="https://juejin.im/user/59199e22a22b9d0058279886" target="">程序员十三</a>
                        <dd>
                        <dd><a href="https://github.com/ZHENFENG13/My-BBS" target="">GitHub</a>
                        <dd>
                        <dd><a href="http://13blog.site" target="">13blog.site</a>
                        <dd>
                    </dl>
                </div>

            </div>
        </div>
    </div>

    <div id="footer-container"></div>

    <script th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        layui.use(['layer', 'element', 'jquery'], function () {
            var layer = layui.layer, $ = layui.$, element = layui.element;
            var device = layui.device();
            //阻止IE7以下访问
            if (device.ie && device.ie < 8) {
                layer.alert('您的浏览器版本过低，请使用微软Edge，谷歌Chrome或者360浏览器访问以体验更佳效果。');
            }



            //搜索
            $('.fly-search').on('click', function () {
                layer.open({
                    type: 1
                    , title: false
                    , closeBtn: false
                    //,shade: [0.1, '#fff']
                    , shadeClose: true
                    , maxWidth: 10000
                    , skin: 'fly-layer-search'
                    , content: ['<form action="/index">'
                        , '<input autocomplete="off" placeholder="搜索内容，回车跳转" type="text" name="keyword">'
                        , '</form>'].join('')
                    , success: function (layero) {
                        var input = layero.find('input');
                        input.focus();
                        layero.find('form').submit(function () {
                            var val = input.val();
                            if (val.replace(/\s/g, '') === '') {
                                return false;
                            }
                            input.val(input.val());
                        });
                    }
                })
            });


            // 我的jquery代码
            $(function () {
                $("#header-container").load("html/header.html");
                $("#topicGroup-container").load("html/topicGroup.html");
                $("#footer-container").load("html/footer.html");

                // 控制列表展开
                $('#toggleList').click(function () {
                    $('#listContainer').toggleClass('show');
                });

                // 话题列表
                $.ajax({
                    method: "get",
                    url: "http://localhost:8080/checkLog/detail/hahahha",
                    success: function (res) {
                        var bbsPostCategoriesData = res.map(function (res) {
                            return {
                                title: res.categoryName,
                                id: res.categoryId,
                                href: '/index?categoryId=' + res.categoryId
                            };
                        });

                        console.log(bbsPostCategoriesData);

                        layui.dropdown.render({
                            elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
                            data: bbsPostCategoriesData,
                            click: function (obj) {
                                window.location.href = obj.href; // 跳转到新的URL
                            }
                        });
                    },
                    error: function (err) {
                        console.log(err);
                    },
                });
            });
        });
    </script>

    <!-- <script src="layui/layui.js"></script> -->
</body>

</html>